 //页面渲染+瀑布流
 $(function () {

      window.onload = function () {
        load()
          .done(function (data) {

            render(data.list);
             sort();
           $(".lazy").lazyload(); 
          
          })
      }

      function load() {
        var options = {
          url: "http://127.0.0.1:8080/static/data/list.json"
        }
        return $.ajax(options)
       /*  .done( function( res ){
           console.log(res);
             render(res)
       })   */
       
      }
      function render(list) {
        $(".superfan-container .fan-list-container .fan-list").html(
          list.map(item =>
            ` <li class="item fan-item"> <a class="inline-block normal-link"
        href="http://127.0.0.1:8080/dist/etaodetail.html#id=${item.goods_id}"
        data-spm-anchor-id="1002.8274269.2699129.1" data-spm-act-id="1002.8274269.2699129.1">
        <div class="pic img">
         <img class="lazy" src="${item.imgUrl} " > </div>
        <div class="info" href="" target="_blank">
          <div class="title" title="婴蒂诺婴儿宝宝6个月啃咬抚触感球按摩感知球手抓球玩具">${item.title}</div>
          <p class="promo-price clearfix"> <span class="price">￥${item.activityPrice} </span><span class="original-price">价格:${item.oriPrice}</span>
          </p>
          <div class="rebate-info" data-spm-anchor-id="1002.8274269.2699129.i2.447a56a6R2rqdP"> <strong
              class="rebate-price">再返${item.rebatePC}</strong> <span class="rebate-rate">${item.rebateText}</span> </div>
          <p class="others clearfix"> <span class="sales fl">已售${item.sales}件</span> </p> </a>
          
            </div>
          </div>
      </li>`
          ).join("")
        )
      }

  
//////////
      function sort() {
        let $items = $(".fan-item");
        height_array = [];
        let offset_array = [];
        $.each($items, function (index, ele) {
          if (index < 4) {
            height_array.push($(ele).outerHeight());
            offset_array.push($(ele).position().left);
            console.log(height_array);
            console.log(offset_array);
          } else {
            let min_height = Math.min.apply(false, height_array);
            let min_index = height_array.indexOf(min_height);
            let _left = offset_array[min_index]
            $(ele).css({
              position: "absolute", 
              top: min_height,
              left: _left,
            })
            height_array[min_index] += $(ele).outerHeight();
          }
        })

      }

      let t = null;
      let loading = false;
      $(window).scroll(function () {
        if (typeof t === "number") {
          return false;
        }
        t = setTimeout(function () {
          t = null;
          var scrollTop = $("html,body").scrollTop();
          let min_height = parseInt(Math.min.apply(false, height_array));
          var scrollTop = $("html,body").scrollTop();
          if (!loading && (scrollTop + innerHeight + 200 > min_height)) {
            loading = true;
            console.log("加载图片");
            load()
          .done(function (data) {

            render(data.list);
             sort();
           $(".lazy").lazyload(); 
          })
          }
        }, 100)
      })
    })
